<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>音符工具</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link href="http://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
  <link href="http://at.alicdn.com/t/font_oq7hnsvdb9y66r.css" rel="stylesheet">

  <link href="temp.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/icons.css" />
  <link rel="stylesheet" type="text/css" href="css/component.css" />


  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>

  <script src="http://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>

  <script src="js/modernizr.custom.js"></script>

  <script src="temp.js"></script>

</head>

<body>


  <div id="st-container" class="st-container">
    <!--<a href="javascript:void(0);" onclick="javascript:document.getElementById('mainDiv').scrollTop=document.getElementById('mainDiv').scrollHeight;">到页面底部</a>-->
    <!-- 	
				example menus 
				these menus will be on top of the push wrapper
			-->
    <nav class="st-menu st-effect-1" id="menu-1">
      <h2 class="icon icon-lab">Sidebar</h2>
      <ul>
        <li><a class="icon icon-data" href="#">Data Management</a></li>
        <li><a class="icon icon-location" href="#">Location</a></li>
        <li><a class="icon icon-study" href="#">Study</a></li>
        <li><a class="icon icon-photo" href="#">Collections</a></li>
        <li><a class="icon icon-wallet" href="#">Credits</a></li>
      </ul>
    </nav>


    <!-- content push wrapper -->
    <div class="st-pusher">

      <div class="st-content" id="mainDiv">

        <div id="st-trigger-effects">

          <button class="btn-large iconfont icon-folder" data-effect="st-effect-1"></button>

        </div>

        <!-- this is the wrapper for the content -->
        <div class="st-content-inner">
          <!-- extra div for emulating position:fixed of the menu -->
          <!-- Top Navigation -->

          <title align="center">音符配置工具</title>

          <div class="note" id="note">

            <div class="col-md-10">
              <!--<input type="text" readonly="" placeholder="选择文件">-->
              <input type="file" id="inputFile" multiple="" v-on:change="onFileChange">
            </div>

            <table class="table table-hover table-bordered table-striped table-condensed" data-search="true" data-striped="true" id="notetable">
              <caption>音符配置工具</caption>
              <thead>
                <tr>
                  <th>
                    <p align="center">ID</p>
                  </th>
                  <th align="center">
                    <p align="center">点击时间</p>
                  </th>
                  <th align="center">
                    <p align="center">移动时间</p>
                  </th>
                  <th align="center">
                    <p>位置(Y)</p>
                  </th>
                  <th>
                    <p>类型</p>
                  </th>
                  <th>
                    <p>扩展数据1</p>
                  </th>
                  <th>
                    <p>扩展数据2</p>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in items">
                  <td align="center" width="5%">
                    <p class="form-control">{{item.id}}</p>
                  </td>

                  <td align="center" width="10%">
                    <input class="form-control" type="number" name="" v-model="item.time" placeholder="点击时间">
                  </td>

                  <td align="center" width="10%">
                    <input class="form-control" type="number" name="" v-model="item.moveTime" placeholder="移动时间">
                  </td>
                  <td width="10%">
                    <input class="form-control" type="number" name="" v-model="item.birthY" placeholder="出现的Y坐标">
                  </td>

                  <td width="10%">
                    <select class="form-control" v-model="item.type" @change="onSelectedType($event, item)"> 
                      <option v-for="option in options" v-bind:value="option.value">
                          {{option.text}}
                      </option>
                    </select>
                  </td>

                  <td width="10%">
                    <input class="form-control" type="number" name="" v-model="item.ext1" v-bind:placeholder="item.ext1placeholder">
                  </td>

                  <td width="10%">
                    <input class="form-control" type="number" name="" v-model="item.ext2" v-bind:placeholder="item.ext2placeholder">
                  </td>

                  <td width="5%">
                    <button class="form-control btn-large iconfont icon-delete delButton" v-on:click="delNote($event, item)"></button>
                  </td>

                </tr>
              </tbody>

            </table>

            <div id="toolNav" class="container">
              <div class="row">
                <div class="col-md-4">
                  <div id="addBtn" data-toggle="modal" data-target="#myModal" class="btn btn-large btn-warning">添加</div>
                </div>
                <div class="col-md-4">
                  <div id="saveBtn" v-on:click="save" class="btn btn-large btn-primary">保存</div>
                </div>
                <div class="col-md-4">
                  <div id="bottomBtn" class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:document.getElementById('mainDiv').scrollTop=document.getElementById('mainDiv').scrollHeight;">到底部</div>
                </div>
              </div>
            </div>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">
                      新的音符配置
                    </h4>
                  </div>

                  <div class="modal-body">

                    <table class="table table-hover table-bordered table-striped table-condensed" data-search="true" data-striped="true">
                      <caption>音符配置工具</caption>
                      <thead>
                        <tr>
                          <th align="center">
                            <p align="center">点击时间</p>
                          </th>
                          <th align="center">
                            <p align="center">移动时间</p>
                          </th>
                          <th align="center">
                            <p>位置(Y)</p>
                          </th>
                          <th>
                            <p>类型</p>
                          </th>
                          <th>
                            <p>扩展数据1</p>
                          </th>
                          <th>
                            <p>扩展数据2</p>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td align="center" width="10%">
                            <input class="form-control" type="number" name="" v-model="addItem.time" placeholder="点击时间">
                          </td>

                          <td align="center" width="10%">
                            <input class="form-control" type="number" name="" v-model="addItem.moveTime" placeholder="移动时间">
                          </td>
                          <td width="10%">
                            <input class="form-control" type="number" name="" v-model="addItem.birthY" placeholder="出现的Y坐标">
                          </td>

                          <td width="10%">
                            <select class="form-control" v-model="addItem.type"> 
                              <option v-for="option in options" v-bind:value="option.value"> {{option.text}}</option>
                             </select>
                          </td>

                          <td width="10%">
                            <input class="form-control" type="number" name="" v-model="addItem.ext1" v-bind:placeholder="addItem.ext1placeholder">
                          </td>

                          <td width="10%">
                            <input class="form-control" type="number" name="" v-model="addItem.ext2" v-bind:placeholder="addItem.ext2placeholder">
                          </td>

                        </tr>
                      </tbody>

                    </table>

                  </div>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="addNote">确定添加</button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal -->
            </div>

          </div>

          <!-- /main -->
        </div>
        <!-- /st-content-inner -->
      </div>
      <!-- /st-content -->

    </div>

    <!-- /st-pusher -->
  </div>
  <!-- /st-container -->


  <script src="js/classie.js"></script>
  <script src="js/sidebarEffects.js"></script>
</body>